﻿@page "/notification"

@inject NotificationService NotificationService

<RadzenExample Name="Notification" Documentation="true">
<div class="row">
    <div class="col-xl-6">
        <div class="row">
            <div class="col-xl-6">
                <h3>Info</h3>
                <RadzenButton Text="Show info notification" Style="margin-bottom: 20px; width: 200px"
                    ButtonStyle="ButtonStyle.Info"
                    Click=@(args => ShowNotification(new NotificationMessage { Severity = NotificationSeverity.Info, Summary = "Info Summary", Detail = "Info Detail", Duration = 4000 })) />
            </div>
            <div class="col-xl-6">
                <h3>Warning</h3>
                <RadzenButton Text="Show warning notification" Style="margin-bottom: 20px; width: 200px"
                    ButtonStyle="ButtonStyle.Warning"
                    Click=@(args => ShowNotification(new NotificationMessage { Severity = NotificationSeverity.Warning, Summary = "Warning Summary", Detail = "Warning Detail", Duration = 4000 })) />
            </div>
        </div>
        <div class="row">
            <div class="col-xl-6">
                <h3>Error</h3>
                <RadzenButton Text="Show error notification" Style="margin-bottom: 20px; width: 200px"
                    ButtonStyle="ButtonStyle.Danger"
                    Click=@(args => ShowNotification(new NotificationMessage { Severity = NotificationSeverity.Error, Summary = "Error Summary", Detail = "Error Detail", Duration = 4000 })) />
            </div>
            <div class="col-xl-6">
                <h3>Success</h3>
                <RadzenButton Text="Show success notification" Style="margin-bottom: 20px; width: 200px"
                    ButtonStyle="ButtonStyle.Success"
                    Click=@(args => ShowNotification(new NotificationMessage { Severity = NotificationSeverity.Success, Summary = "Success Summary", Detail = "Success Detail", Duration = 4000 })) />
            </div>
        </div>
        <div class="row">
            <div class="col">
                <h3>Message with custom position</h3>
                <RadzenButton Text="Show notification with custom position" Style="margin-bottom: 20px;"
                    Click=@(args => ShowNotification(new NotificationMessage { Style = "position: absolute; left: -1000px;", Severity = NotificationSeverity.Success, Summary = "Success Summary", Detail = "Success Detail", Duration = 40000 })) />
            </div>
        </div>
    </div>
    <div class="col-xl-6">
        <EventConsole @ref=@console />
    </div>
</div>
</RadzenExample>

@code {
    EventConsole console;

    void ShowNotification(NotificationMessage message)
    {
        NotificationService.Notify(message);

        console.Log($"{message.Severity} notification");
    }
}
